<!-- 物联网数据 -->
<template>
  <div class="app-container home">
    <!-- 头部 包括顶部logo、导航、banner轮播图 -->
    <header>
      <div class="w">
        <div class="logo"><img :src="logo" class="logo-img"><img :src="logoText" class="logo-text-img"></div>
        <nav>
          <a href="javascript:void(0)">首页</a>
          <a href="javascript:void(0)">应用场景</a>
          <a href="javascript:void(0)">解决方案</a>
          <a href="javascript:void(0)">核心产品</a>
          <a href="javascript:void(0)">物联网设备</a>
        </nav>
        <router-link target="_blank" to="/login">
          <button class="login-submit">登录</button>
        </router-link>
        <div class="carousel">
          <el-carousel :autoplay="false" arrow="always">
            <el-carousel-item v-for="item in bannerList" :key="item.index">
              <div class="item">
                <div class="item-left">
                  <h2>新用户福利体系上线</h2>
                  <h6>注册者开发者，即领价值1500元新用户福利</h6>
                  <button>了解更多</button>
                </div>
                <img :src="item.img" class="item-right">
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </header>
    <!-- 公告中心 -->
    <div class="notice">
      <ul>
        <li><i>公告中心<img :src="notice"></i></li>
        <li class="active"><p>上海励尔信息科技有限公司</p><p>地图js api全方位支持机位地图的制作</p></li>
        <li><p>上海励尔信息科技有限公司</p><p>地图js api全方位支持机位地图的制作</p></li>
        <li><p>上海励尔信息科技有限公司</p><p>地图js api全方位支持机位地图的制作</p></li>
        <li><a href="javascript:void(0);">查看更多</a></li>
      </ul>
    </div>
    <!-- 应用场景 -->
    <div class="applicationScenario w1">
      <div class="title">
        <p class="e-name">Application scenario</p>
        <p class="name">应用场景</p>
        <span/>
      </div>
      <img :src="qrcode" class="qrcode">
      <ul>
        <li class="active" data-value="集团园区"><svg-icon icon-class="groupSvg"/><span>集团园区</span></li>
        <li data-value="商业综合体"><svg-icon icon-class="shopSvg"/><span>商业综合体<br>（商场）</span></li>
        <li data-value="酒店"><svg-icon icon-class="hotelSvg"/><span>酒店</span></li>
        <li data-value="医院"><svg-icon icon-class="hospitalSvg"/><span>医院</span></li>
        <li data-value="学校"><svg-icon icon-class="schoolSvg"/><span>学校</span></li>
        <li data-value="物流仓储"><svg-icon icon-class="logisticsSvg"/><span>物流仓储</span></li>
        <li data-value="旅游景区"><svg-icon icon-class="travelSvg"/><span>旅游景区</span></li>
      </ul>
    </div>
    <!-- 定位 -->
    <div class="position-container w1">
      <div class="position-left">
        <p class="title">定位</p>
        <ul>
          <li><span/><span>日均千亿级定位请求</span></li>
          <li><span/><span>多种混合定制方式</span></li>
          <li><span/><span>支持地理围栏功能</span></li>
        </ul>
        <button>了解更多</button>
      </div>
      <transition name="fade">
        <img v-show="solutionType =='集团园区'" :src="positionGroup" alt="" class="position-right">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='商业综合体'" :src="positionShop" alt="" class="position-right">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='酒店'" :src="positionHotel" alt="" class="position-right">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='医院'" :src="positionHospital" alt="" class="position-right">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='学校'" :src="positionSchool" alt="" class="position-right">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='物流仓储'" :src="positionLogistics" alt="" class="position-right">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='旅游景区'" :src="positionTravel" alt="" class="position-right">
      </transition>
    </div>
    <!-- 解决方案 -->
    <div class="solution w1">
      <transition name="fade">
        <img v-show="solutionType =='集团园区'" :src="groupBg" alt="" class="solution-bg">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='商业综合体'" :src="shopBg" alt="" class="solution-bg">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='酒店'" :src="hotelBg" alt="" class="solution-bg">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='医院'" :src="hospitalBg" alt="" class="solution-bg">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='学校'" :src="schoolBg" alt="" class="solution-bg">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='物流仓储'" :src="logisticsBg" alt="" class="solution-bg">
      </transition>
      <transition name="fade">
        <img v-show="solutionType =='旅游景区'" :src="travelBg" alt="" class="solution-bg">
      </transition>
      <div class="solution-left">
        <div class="title">
          <p class="e-name">The solution</p>
          <p class="name">解决方案</p>
        </div>
        <ul>
          <li class="active">集团园区</li>
          <li>商业综合体</li>
          <li>酒店</li>
          <li>医院</li>
          <li>学校</li>
          <li>物流仓储</li>
          <li>旅游景区</li>
        </ul>
      </div>
      <div class="solution-right">
        <p>一站式解决行业痛点</p>
        <ul class="item-text">
          <li><span/><span>优化服务体验</span></li>
          <li><span/><span>提升运营效率</span></li>
          <li><span/><span>赋能业务增长</span></li>
        </ul>
        <button>了解更多</button>
        <div class="hr"/>
        <transition name="fade">
          <ul v-show="solutionType =='集团园区'" class="item-img">
            <li v-for="item in groupImgList" :key="item.key" class="groupImgList"><img :src="item.img" alt=""></li>
          </ul>
        </transition>
        <transition name="fade">
          <ul v-show="solutionType =='商业综合体'" class="item-img">
            <li v-for="item in shopImgList" :key="item.key" class="shopImgList"><img :src="item.img" alt=""></li>
          </ul>
        </transition>
        <transition name="fade">
          <ul v-show="solutionType =='酒店'" class="item-img">
            <li v-for="item in hotelImgList" :key="item.key" class="hotelImgList"><img :src="item.img" alt=""></li>
          </ul>
        </transition>
        <transition name="fade">
          <ul v-show="solutionType =='医院'" class="item-img">
            <li v-for="item in hospitalImgList" :key="item.key" class="hospitalImgList"><img :src="item.img" alt=""></li>
          </ul>
        </transition>
        <transition name="fade">
          <ul v-show="solutionType =='学校'" class="item-img">
            <li v-for="item in schoolImgList" :key="item.key" class="schoolImgList"><img :src="item.img" alt=""></li>
          </ul>
        </transition>
        <transition name="fade">
          <ul v-show="solutionType =='物流仓储'" class="item-img">
            <li v-for="item in logisticsImgList" :key="item.key" class="logisticsImgList"><img :src="item.img" alt=""></li>
          </ul>
        </transition>
        <transition name="fade">
          <ul v-show="solutionType =='旅游景区'" class="item-img">
            <li v-for="item in travelImgList" :key="item.key" class="travelImgList"><img :src="item.img" alt=""></li>
          </ul>
        </transition>
      </div>
    </div>
    <!-- 产品展示 -->
    <div class="productDisplay w1">
      <div class="product-left">
        <div class="title">
          <p class="e-name">Product display</p>
          <p class="name">产品展示</p>
          <span/>
          <button class="active mobile" @click="setActiveItem(0)">移动端</button>
          <button class="web" @click="setActiveItem(1)">WEB端</button>
        </div>
      </div>
      <div class="product-right">
        <el-carousel ref="carousel" :autoplay="false" direction="vertical">
          <el-carousel-item name="0">
            <img :src="productDisplayBg1" alt="" class="img">
            <img :src="productDisplayBg1" alt="" class="img">
            <img :src="productDisplayBg1" alt="" class="img">
            <img :src="productDisplayBg1" alt="" class="img">
          </el-carousel-item>
          <el-carousel-item name="1">
            <img :src="productDisplayBg" alt="" class="img1">
          </el-carousel-item>
        </el-carousel>
        <div class="toTopImg"><img :src="toTop" alt="" @click="setActiveItem(0)"></div>
        <div class="toBottomImg"><img :src="toBottom" alt="" @click="setActiveItem(1)"></div>
        <!--<ul>
          <li><img :src="productDisplayBg" alt=""></li>
          <div class="toTopImg"><img :src="toTop" alt=""></div>
          <div class="toBottomImg"><img :src="toBottom" alt=""></div>
        </ul> -->
      </div>
    </div>
    <div class="internationalDevices w1">
      <div class="title">
        <p class="e-name">Internet of things devices</p>
        <p class="name">物联网设备</p>
        <span/>
      </div>
      <ul>
        <li :style ="devicesInfo1">
          <p>用户信息传输装置</p>
          <p>设计院开展扶贫困募捐活动的重要根据总局文明委《关于开展扶贫活动的通知》</p>
        </li>
        <li :style ="devicesInfo2">
          <p>水系统采集柜</p>
          <p>设计院开展扶贫困募捐活动的重要根据总局文明委《关于开展扶贫活动的通知》</p>
        </li>
        <li :style ="devicesInfo3">
          <p>电气安全智能管理</p>
          <p>设计院开展扶贫困募捐活动的重要根据总局文明委《关于开展扶贫活动的通知》</p>
        </li>
        <li :style ="devicesInfo4">
          <p>风系统采集柜</p>
          <p>设计院开展扶贫困募捐活动的重要根据总局文明委《关于开展扶贫活动的通知》</p>
        </li>
        <li :style ="devicesInfo5">
          <p>无线智能独立烟感</p>
          <p>设计院开展扶贫困募捐活动的重要根据总局文明委《关于开展扶贫活动的通知》</p>
        </li>
        <li :style ="devicesInfo6">
          <p>可视化管理</p>
          <p>设计院开展扶贫困募捐活动的重要根据总局文明委《关于开展扶贫活动的通知》</p>
        </li>
      </ul>
    </div>
    <footer>
      <div class="w">
        <ul>
          <li>
            <p>核心产品</p>
            <span>瑞眼智慧消防监管云平台</span>
            <span>瑞眼云消防物联网APP</span>
            <span>移动执法终端</span>
          </li>
          <li>
            <p>硬件设备</p>
            <span>用户传输终端装置</span>
            <span>无线智能独立烟感APP</span>
            <span>可视化管理</span>
            <span>电气安全智能管理</span>
            <span>水系统采集柜</span>
            <span>风采统采集柜</span>
            <span>室外消火栓监测装置</span>
            <span>压力传感器</span>
            <span>水位传感器</span>
          </li>
          <li>
            <p>行业方案</p>
            <span>商场综合性楼宇</span>
            <span>园区企业（化工、办公）</span>
            <span>酒店、住宅</span>
            <span>医院</span>
          </li>
          <li>
            <p>联系我们</p>
            <span><img :src="footerQrcode" alt=""></span>
            <span>微信公众号</span>
          </li>
          <li>
            <p>智慧消防咨询</p>
            <span class="tel">400-526-65</span>
            <span>工作日 09:00-10:00</span>
            <span>上海市杨浦区长阳路563号</span>
            <span>maketing@rsyeye.com</span>
          </li>
        </ul>
      </div>
    </footer>
    <div class="other">
      <div class="logo">
        <img :src="logo" class="logo-img"><img :src="logoText" class="logo-text-img">
        <div class="other-text">沪ICP备16053114号-2沪公网安备 31011502400137号 </div>
      </div>
    </div>
  </div>
</template>
<script>
// 顶部跟底部的两个logo
import logo from '@/assets/home/logo.png'
import logoText from '@/assets/home/logoText.png'
// 顶部轮播图背景图
import banner1 from '@/assets/home/banner1.png'
import banner2 from '@/assets/home/banner2.png'
import banner3 from '@/assets/home/banner3.png'
import banner4 from '@/assets/home/banner4.png'
// 定位背景图
import positionGroup from '@/assets/home/position-group.png'
import positionHospital from '@/assets/home/position-hospital.png'
import positionHotel from '@/assets/home/position-hotel.png'
import positionLogistics from '@/assets/home/position-logistics.png'
import positionSchool from '@/assets/home/position-school.png'
import positionShop from '@/assets/home/position-shop.png'
import positionTravel from '@/assets/home/position-travel.png'
// 公告中心的小喇叭图标
import notice from '@/assets/home/notice.png'
// 应用场景的二维码
import qrcode from '@/assets/home/qrcode.png'
// 底部公众号的二维码
import footerQrcode from '@/assets/home/footer-qrcode.png'
// 上下箭头
import toTop from '@/assets/home/toTop.png'
import toBottom from '@/assets/home/toBottom.png'
// 产品展示图片
import productDisplayBg from '@/assets/home/product-display-bg.png'
import productDisplayBg1 from '@/assets/home/product-display-bg1.png'
// 解决方案背景图
import groupBg from '@/assets/home/group-bg.png'
import hotelBg from '@/assets/home/hotel-bg.png'
import logisticsBg from '@/assets/home/logistics-bg.png'
import schoolBg from '@/assets/home/school-bg.png'
import travelBg from '@/assets/home/travel-bg.png'
import shopBg from '@/assets/home/shop-bg.png'
import hospitalBg from '@/assets/home/hospital-bg.png'
// 物联网设置背景图
import devicesInfo1 from '@/assets/home/devicesInfo1.png'
import devicesInfo2 from '@/assets/home/devicesInfo2.png'
import devicesInfo3 from '@/assets/home/devicesInfo3.png'
import devicesInfo4 from '@/assets/home/devicesInfo4.png'
import devicesInfo5 from '@/assets/home/devicesInfo5.png'
import devicesInfo6 from '@/assets/home/devicesInfo6.png'
// 酒店
import hotelImg1 from '@/assets/home/hotel-img1.png'
import hotelImg2 from '@/assets/home/hotel-img2.png'
import hotelImg3 from '@/assets/home/hotel-img3.png'
import hotelImg4 from '@/assets/home/hotel-img4.png'
import hotelImg5 from '@/assets/home/hotel-img5.png'
// 旅游景区
import travelImg1 from '@/assets/home/travel-img1.png'
import travelImg2 from '@/assets/home/travel-img2.png'
import travelImg3 from '@/assets/home/travel-img3.png'
import travelImg4 from '@/assets/home/travel-img4.png'
import travelImg5 from '@/assets/home/travel-img5.png'
// 集团
import groupImg1 from '@/assets/home/group-img1.png'
import groupImg2 from '@/assets/home/group-img2.png'
import groupImg3 from '@/assets/home/group-img3.png'
import groupImg4 from '@/assets/home/group-img4.png'
// 医院
import hospitalImg1 from '@/assets/home/hospital-img1.png'
import hospitalImg2 from '@/assets/home/hospital-img2.png'
import hospitalImg3 from '@/assets/home/hospital-img3.png'
import hospitalImg4 from '@/assets/home/hospital-img4.png'
import hospitalImg5 from '@/assets/home/hospital-img5.png'
// 商场
import shopImg1 from '@/assets/home/shop-img1.png'
import shopImg2 from '@/assets/home/shop-img2.png'
import shopImg3 from '@/assets/home/shop-img3.png'
import shopImg4 from '@/assets/home/shop-img4.png'
// 学校
import schoolImg1 from '@/assets/home/school-img1.png'
import schoolImg2 from '@/assets/home/school-img2.png'
import schoolImg3 from '@/assets/home/school-img3.png'
import schoolImg4 from '@/assets/home/school-img4.png'
import schoolImg5 from '@/assets/home/school-img5.png'
// 物流
import logisticsImg1 from '@/assets/home/logistics-img1.png'
import logisticsImg2 from '@/assets/home/logistics-img2.png'
import logisticsImg3 from '@/assets/home/logistics-img3.png'
import logisticsImg4 from '@/assets/home/logistics-img4.png'
import logisticsImg5 from '@/assets/home/logistics-img5.png'
import $ from 'jquery'
export default {
  name: 'Home',
  data() {
    return {
      logo, logoText, notice, qrcode, footerQrcode, toTop, toBottom,
      banner1, banner2, banner3, banner4,
      productDisplayBg, productDisplayBg1,
      shopImg1, shopImg2, shopImg3, shopImg4,
      groupImg1, groupImg2, groupImg3, groupImg4,
      travelImg1, travelImg2, travelImg3, travelImg4, travelImg5,
      schoolImg1, schoolImg2, schoolImg3, schoolImg4, schoolImg5,
      hospitalImg1, hospitalImg2, hospitalImg3, hospitalImg4, hospitalImg5,
      hotelImg1, hotelImg2, hotelImg3, hotelImg4, hotelImg5,
      logisticsImg1, logisticsImg2, logisticsImg3, logisticsImg4, logisticsImg5,
      hotelBg, hospitalBg, groupBg, logisticsBg, schoolBg, travelBg, shopBg,
      positionGroup, positionHospital, positionHotel, positionLogistics, positionSchool, positionShop, positionTravel,
      devicesInfo1: {
        backgroundImage: 'url(' + devicesInfo1 + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
      },
      devicesInfo2: {
        backgroundImage: 'url(' + devicesInfo2 + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
      },
      devicesInfo3: {
        backgroundImage: 'url(' + devicesInfo3 + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
      },
      devicesInfo4: {
        backgroundImage: 'url(' + devicesInfo4 + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
      },
      devicesInfo5: {
        backgroundImage: 'url(' + devicesInfo5 + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
      },
      devicesInfo6: {
        backgroundImage: 'url(' + devicesInfo6 + ')',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100%'
      },
      groupImgList: [{
        img: groupImg1
      }, {
        img: groupImg2
      }, {
        img: groupImg3
      }, {
        img: groupImg4
      }],
      hospitalImgList: [{
        img: hospitalImg1
      }, {
        img: hospitalImg2
      }, {
        img: hospitalImg3
      }, {
        img: hospitalImg4
      }, {
        img: hospitalImg5
      }],
      schoolImgList: [{
        img: schoolImg1
      }, {
        img: schoolImg2
      }, {
        img: schoolImg3
      }, {
        img: schoolImg4
      }, {
        img: schoolImg5
      }],
      shopImgList: [{
        img: shopImg1
      }, {
        img: shopImg2
      }, {
        img: shopImg3
      }, {
        img: shopImg4
      }],
      hotelImgList: [{
        img: hotelImg1
      }, {
        img: hotelImg2
      }, {
        img: hotelImg3
      }, {
        img: hotelImg4
      }, {
        img: hotelImg5
      }],
      travelImgList: [{
        img: travelImg1
      }, {
        img: travelImg2
      }, {
        img: travelImg3
      }, {
        img: travelImg4
      }, {
        img: travelImg5
      }],
      logisticsImgList: [{
        img: logisticsImg1
      }, {
        img: logisticsImg2
      }, {
        img: logisticsImg3
      }, {
        img: logisticsImg4
      }, {
        img: logisticsImg5
      }],
      bannerList: [{
        img: banner1
      }, {
        img: banner2
      }, {
        img: banner3
      }, {
        img: banner4
      }],
      solutionType: '集团园区'
    }
  },
  computed: {
  },
  created() {
    const that = this
    this.$nextTick(function() {
      $('.solution-left ul li').click(function() {
        const index = $(this).index()
        $('.applicationScenario ul li').eq(index).addClass('active').siblings().removeClass('active')
        $(this).addClass('active').siblings().removeClass('active')
        that.solutionType = $(this).html()
      })
      $('.applicationScenario ul li').click(function() {
        const index = $(this).index()
        $('.solution-left ul li').eq(index).addClass('active').siblings().removeClass('active')
        $(this).addClass('active').siblings().removeClass('active')
        that.solutionType = $(this).attr('data-value')
      })
    })
  },
  methods: {
    handleLogin() {
      this.$router.push({ path: '/' })
    },
    setActiveItem(data) {
      this.$refs.carousel.setActiveItem(data)
      if (data === 0) {
        $('.mobile').addClass('active')
        $('.web').removeClass('active')
      } else {
        $('.mobile').removeClass('active')
        $('.web').addClass('active')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
